<!--
 * @Author: wuchenguang1998
 * @Date: 2024-05-13 22:34:03
 * @LastEditors: 秦少卫
 * @LastEditTime: 2024-10-07 17:20:20
 * @Description: 隐藏或显示元素
-->

<template>
  <Tooltip  v-if="isOne">
    <Button long v-if="isHide" @click="doHide(false)" icon="md-eye-off" type="text">hide</Button>
    <Button long v-else @click="doHide(true)" icon="md-eye" type="text">unhide</Button>
  </Tooltip>
</template>

<script setup name="Hide" lang="ts">
import useSelect from '@/tool/select';
import { onBeforeUnmount, onMounted } from 'vue';

const { isOne, canvasEditor } = useSelect();
const isHide = ref(false);

const doHide = (hide:any) => {
  // 修改visible属性
  const activeObject = canvasEditor.fbCanvas.getActiveObject();
  activeObject?.set('visible', !hide);
  canvasEditor.fbCanvas.requestRenderAll();
  isHide.value = hide;
};

const handleSelected = () => {
  const activeObject = canvasEditor.fbCanvas.getActiveObject();
  isHide.value = !activeObject?.visible;
};

onMounted(() => {
  canvasEditor.on('selectOne', handleSelected);
});

onBeforeUnmount(() => {
  canvasEditor.off('selectOne', handleSelected);
});
</script>
